<template>
	<!-- 确定支付 -->
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>
		<!-- #endif -->
		<navbar title="确定支付" />
		<!-- 商品信息 -->
		<view class="goods">
			<view class="paygoods">
				<image :src="payInfo.cover_image" class="paygoods_pic"></image>
				<view class="paygoodsinfo">
					<view class="paygoodsinfo_title">{{payInfo.name}}</view>
					<view class="paygoodsinfo_num">x{{buynum}}</view>
					<view class="paygoodsinfo_price">￥{{payInfo.price}}</view>
				</view>
			</view>
			<view class="payinfo">
				<view class="payinfo_title">已优惠金额</view>
				<text>￥{{discount || 0}}</text>
			</view>
			<view class="payinfo">
				<view class="payinfo_title">优惠券</view>
				<navigator class="payinfo_text" style="justify-content: flex-end;"
					:url="`/pages/mine/coupon/availableCoupon?amount=${price}`" v-if="JSON.stringify(coupon)=='{}'">
					<text v-if="couponList.length===0" @click.stop>暂无可用优惠券</text>
					<text v-else>选择优惠券</text>
				</navigator>
				<navigator class="payinfo_text" :url="`/pages/mine/coupon/availableCoupon?amount=${price}`"
					v-if="JSON.stringify(coupon)!='{}'">
					<view class="payinfo_text_coupon">{{coupon.price}}元优惠券 <text
							style="color: #FF0000;">-￥{{coupon.price}}</text></view>
				</navigator>
			</view>
			<view class="paytip">
				<image src="/static/images/blindbox/horn.png"></image>
				<text>商品抽奖存在概率，付费请谨慎/3件包邮（偏远地区除外）</text>
			</view>
			<view class="line"></view>
			<view class="payinfo">
				<view class="payinfo_title">还需要支付</view>
				<text>￥{{payableMoney}}</text>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="paytype">
			<view class="title">支付方式</view>
			<view class="paytype_item" @click="payActive=1">
				<image src="/static/images/mall/paychecked.png" v-if="payActive === 1" class="paytype_item_check">
				</image>
				<image src="/static/images/mall/paycheck.png" v-else class="paytype_item_check"></image>
				<image src="/static/images/mall/alipay.png" class="paytype_item_icon"></image>
				<text>支付宝支付</text>
			</view>
			<view class="paytype_item" @click="payActive=2">
				<image src="/static/images/mall/paychecked.png" v-if="payActive === 2" class="paytype_item_check">
				</image>
				<image src="/static/images/mall/paycheck.png" v-else class="paytype_item_check"></image>
				<image src="/static/images/mall/wechat.png" class="paytype_item_icon"></image>
				<text>微信支付</text>
			</view>
			<view class="paytype_balance" @click="payActive=0">
				<view class="paytype_balance_left">
					<image src="/static/images/mall/paychecked.png" v-if="payActive === 0"
						class="paytype_balance_left_check"></image>
					<image src="/static/images/mall/paycheck.png" v-else class="paytype_balance_left_check"></image>
					<image src="/static/images/mall/balance.png" class="paytype_balance_left_icon"></image>
					<text>心愿币支付</text>
				</view>
				<view class="paytype_balance_right">
					当前可用心愿币为<text>￥{{payBalance}}</text>
				</view>
			</view>
			<view class="paytype_warning">商品抽奖存在概率性,付费请谨慎</view>
			<view class="paytype_tip">
				<view class="paytype_tip_title">温馨提示</view>
				<view class="paytype_tip_content">
					<rich-text :nodes="paytipcontent"></rich-text>
				</view>
			</view>
			<view class="paytype_tip">
				<view class="paytype_tip_text">商品抽中概率</view>
				<view class="paytype_tip_content">
					<text>传说：{{energyInfo.virtual_legend_probability || 0}}%</text>
					<text>史诗：{{energyInfo.virtual_epic_probability || 0}}%</text>
					<text>稀有：{{energyInfo.virtual_rare_probability || 0}}%</text>
					<text>普通：{{energyInfo.virtual_normal_probability || 0}}%</text>
				</view>
			</view>
		</view>
		<view class="payagreement">
			<view class="payagreement_icon">
				<image src="/static/images/mall/paychecked.png" v-if="isPayagreement" @click="isPayagreement = false">
				</image>
				<image src="/static/images/mall/paycheck.png" v-else @click="isPayagreement = true"></image>
			</view>
			<view class="payagreement_text" @click="isPayagreement = !isPayagreement">
				我已阅读并同意<text @click.stop="toPurchaseInstructions">《商品购买须知》</text>
			</view>
		</view>
		<view class="paybtn">
			<view class="paybtn_text">
				<view class="paybtn_text_top">
					总计：<text>￥{{payableMoney}}</text>
				</view>
				<view class="paybtn_text_bot">
					优惠：<text>￥{{coupon.price || 0}}</text>
				</view>
			</view>
			<view class="paybtn_btn" @click="payBefore">立即支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activity_id: '', //盲盒id
				price: '', //价格
				open_method: '', //当前抽取的次数类型 1单抽 2五连抽
				discount: '', //优惠金额
				payInfo: {}, //购买界面信息
				payBalance: '', //当前可用余额
				payableMoney: 0, //应支付金额
				couponDeduction: 0, //优惠券抵扣金额
				isDeduction: false, //是否选择优惠券抵扣
				couponList: [], //可用优惠券列表
				coupon: {}, //选中的优惠券信息
				payActive: 0, //当前选中的支付方式 1支付宝 2微信 0余额
				allowTap: true, //防误触
				goods_id: 0, //商品id
				goods_spec_id: 0, //规格id
				num: 1, //购买数量
				goodsType: 1, //商品类型 1普通 2积分
				orderInfo: {}, //订单信息
				paytipcontent: '', //支付提示
				isPayagreement: true, //是否同意购买须知
				timestamp: '',
				energyInfo: {} //盲盒活动能量buff和模拟概率
			}
		},
		onLoad(options) {
			this.activity_id = options.activity_id;
			this.price = options.price;
			this.open_method = options.open_method;
			this.discount = options.discount;
			if (this.open_method == 3) {
				this.open_method = 1;
			}
			this.payableMoney = this.price;
			if (options.cjType && options.open_method != 2) {
				this.open_method = options.open_method
				let num = 1;
				if (this.open_method == 2) {
					num = 5;
				} else if (this.open_method == 10) {
					num = 10
				} else if (this.open_method == 3) {
					num = 3
				} else {
					num = 1;
				}

			}
			this.getIndexExtractboxa();
			this.getCouponList();
			this.getNoticecontent();
			this.getEnergy();
		},
		onShow() {
			let randomnum = Math.round(Math.random() * 99999 + 0);
			this.timestamp = Date.now().toString() + randomnum.toString();
			let page = getCurrentPages();
			let curPage = page[page.length - 1];
			if (curPage.$vm.coupon && JSON.stringify(curPage.$vm.coupon) != '{}') {
				this.coupon = curPage.$vm.coupon;
				this.couponDeduction = this.coupon.price;
				let money = (Number(this.price) - Number(this.couponDeduction)).toFixed(2);
				if (money > 0) {
					this.payableMoney = money;
				} else {
					this.payableMoney = 0;
				}
			}
		},
		computed: {
			buynum() {
				let num = 1;
				if (this.open_method == 2) {
					num = 5;
				} else if (this.open_method == 10) {
					num = 10
				} else if (this.open_method == 3) {
					num = 3
				} else {
					num = 1;
				}
				return num;
			}
		},
		methods: {
			//获取盲盒购买信息
			getIndexExtractboxa() {
				this.$api.indexExtractboxa({
					activity_id: this.activity_id,
					open_method: this.open_method
				}).then(res => {
					this.payBalance = res.balance;
					this.payInfo = res.order_info;
				})
			},
			//获取盲盒活动能量buff和模拟概率
			getEnergy() {
				this.$api.energy({
					activity_id: this.activity_id
				}).then(res => {
					this.energyInfo = res;
				})
			},
			//获取可用优惠券列表
			getCouponList() {
				this.$api.indexCouponlist({
					pay: this.price,
					activity_id: this.activity_id
				}).then(res => {
					this.couponList = res;
				})
			},
			//支付提示
			getNoticecontent() {
				this.$api.noticecontent().then(res => {
					this.paytipcontent = res;
				})
			},
			showToast(msg) {
				uni.showToast({
					title: msg,
					icon: 'none'
				})
			},
			//查看购买须知
			toPurchaseInstructions() {
				uni.navigateTo({
					url: '/pages/index/purchaseInstructions'
				})
			},
			//抽取盲盒 支付前
			payBefore() {
				if (!this.isPayagreement) {
					uni.showToast({
						title: '请阅读并同意盲盒购买须知',
						icon: 'none'
					})
					return
				}
				if (!this.allowTap) return
				this.allowTap = false;
				setTimeout(() => {
					this.allowTap = true;
				}, 3000)
				let coupon_id = '';
				if (this.coupon.coupon_id && this.coupon.coupon_id != undefined) {
					coupon_id = this.coupon.coupon_id;
				}
				if (this.payActive == 0) {
					//支付类型为余额
					this.$api.indexExtractboxd({
						activity_id: this.activity_id,
						coupon_id,
						balance: this.payableMoney,
						open_method: this.open_method,
						price: '0',
						pay_type: '0',
						box_d: this.timestamp
					}).then(res => {
						console.log("抽取盲盒金额为0: ", res);
						uni.redirectTo({
							url: '/pages/blindbox/blindbox_result2?' + this.$url.urlEncode({
								activity_id: this.activity_id,
								price: this.price,
								order_id: res.order_id,
								open_method: this.open_method,
								cjType:'cj'
							})
						})
					})
				} else {
					//支付类型为支付宝 微信
					this.$api.indexExtractboxb({
						activity_id: this.activity_id,
						coupon_id,
						balance: '0',
						open_method: this.open_method,
						price: this.payableMoney,
						pay_type: this.payActive
					}).then(res => {
						
						console.log('抽取盲盒金额大于0', res);
						this.order_id = res.order_id;
						//支付
						this.goPay(this.payActive, res.pay_info, this.open_method);
					})
				}
			},
			//去支付
			goPay(pay_type, payInfo) {
				uni.showLoading({
					title: '支付中...'
				})
				if (pay_type == 2) {
					uni.getProvider({
						service: 'payment',
						success: (res) => {
							if (res.provider.indexOf('wxpay') != -1) {
								uni.requestPayment({
									provider: "wxpay",
									orderInfo: payInfo,
									success: (res) => {
										console.log('success:' + JSON.stringify(res));
										uni.hideLoading();
										uni.redirectTo({
											url: '/pages/blindbox/blindbox_result2?' + this
												.$url.urlEncode({
													activity_id: this.activity_id,
													price: this.price,
													order_id: this.order_id,
													open_method: this.open_method,
													cjType:'cj'
												})
										})
									},
									fail: (err) => {
										console.log('fail:' + JSON.stringify(err));
										uni.hideLoading();
										uni.showToast({
											title: '支付失败，请重试',
											icon: 'none'
										})
									}
								})
							}
						}
					})
				} else {
					uni.getProvider({
						service: 'payment',
						success: (res) => {
							if (res.provider.indexOf('alipay') != -1) {
								uni.requestPayment({
									"provider": "alipay",
									"orderInfo": payInfo,
									success: (res) => {
										console.log('success:' + JSON.stringify(res));
										uni.hideLoading();
										uni.redirectTo({
											url: '/pages/blindbox/blindbox_result2?' + this
												.$url.urlEncode({
													activity_id: this.activity_id,
													price: this.price,
													order_id: this.order_id,
													open_method: this.open_method,
																					cjType:'cj'
												})
										})
									},
									fail: (err) => {
										console.log('fail:' + JSON.stringify(err));
										uni.hideLoading();
										uni.showToast({
											title: '支付失败，请重试',
											icon: 'none'
										})
									}
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-top: calc(var(--status-bar-height) + 100rpx);
		padding-bottom: 230rpx;
	}

	.title {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.goods {
		width: 750rpx;
		background: #FFFFFF;
		padding: 40rpx;
		margin-top: 1rpx;
	}

	.paygoods {
		display: flex;

		&_pic {
			width: 160rpx;
			height: 160rpx;
			border-radius: 10rpx;
		}

		.paygoodsinfo {
			width: 500rpx;
			height: 160rpx;
			margin-left: 24rpx;
			@include column-between;

			&_title {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
				@include one;
			}

			&_num {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				@include one;
			}

			&_price {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF1200;
			}
		}
	}

	.payinfo {
		@include between;
		margin-top: 40rpx;

		&_title {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: bold;
			color: #111111;
		}

		text {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FF1200;
		}

		&_text {
			@include between;
			width: 420rpx;

			text {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
			}

			&_icon {
				@include align-center;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			&_coupon {
				width: 450rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
				@include between;
			}

			&_more {
				width: 12rpx;
				height: 24rpx;
			}
		}
	}

	.paytip {
		@include between;
		margin-top: 24rpx;

		image {
			width: 36rpx;
			height: 36rpx;
		}

		text {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF1200;
		}
	}

	.line {
		width: 666rpx;
		height: 2rpx;
		background: #EEEEEE;
		margin: 40rpx auto;
	}

	.payagreement {
		width: 750rpx;
		background: #FFFFFF;
		box-shadow: 0 2rpx 2rpx 0 rgba(0, 0, 0, 0.1);
		border-top: 1rpx solid #EEEEEE;
		@include align-center;
		padding: 30rpx 38rpx;
		position: fixed;
		bottom: 112rpx;
		z-index: 999;

		&_icon {
			@include align-center;
			margin-right: 16rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		&_text {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;

			text {
				color: #FF1200;
			}
		}
	}

	.paytype {
		width: 750rpx;
		background-color: $white;
		margin-top: 12rpx;
		padding: 30rpx;

		&_item {
			@include align-center;
			margin-top: 30rpx;

			&:first-child {
				margin-top: 0;
			}

			&_check {
				width: 36rpx;
				height: 36rpx;
			}

			&_icon {
				width: 40rpx;
				height: 40rpx;
				margin: 0 20rpx;
			}

			text {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
		}

		&_balance {
			margin-top: 30rpx;
			@include between;

			&_left {
				@include align-center;

				&_check {
					width: 36rpx;
					height: 36rpx;
				}

				&_icon {
					width: 40rpx;
					height: 40rpx;
					margin: 0 20rpx;
				}

				text {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
			}

			&_right {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;

				text {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF1200;
					margin-left: 16rpx;
				}
			}
		}

		&_warning {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF1200;
			margin-top: 24rpx;
		}

		&_tip {
			margin-top: 40rpx;

			&_title {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			&_text {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: bold;
				color: #999999;
			}

			&_content {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 34rpx;
				margin-top: 16rpx;

				text {
					margin-right: 10rpx;
				}
			}
		}
	}

	.paybtn {
		width: 750rpx;
		height: 112rpx;
		background: #FFFFFF;
		border-top: 1rpx solid #EEEEEE;
		padding: 0 30rpx;
		@include between;
		position: fixed;
		bottom: 0;
		z-index: 999;

		&_text {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;

			&_top {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: bold;
				color: #1D1D1D;

				text {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF1200;
				}
			}

			&_bot {
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: bold;
				color: #1D1D1D;

				text {
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF1200;
				}
			}

		}

		&_btn {
			width: 280rpx;
			height: 70rpx;
			background: linear-gradient(#FFBA00, #FE2E1C);
			border-radius: 35rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
		}
	}
</style>
